<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '活动详情',
  },
}
</route>

<script setup>
import ActivityBaseInfo from '@/components/ActivityBaseInfo.vue'
import ContentBox from '@/components/ContentBox.vue'
import HistoryEvaluationItem from '@/components/HistoryEvaluationItem.vue'
import ProgrammeList from '@/components/ProgrammeList.vue'
import CustomApi from '@/service/custom'
import { nameMask, phoneMask } from '@/utils/index'

const id = ref('')
onLoad((options) => {
  const { id } = options
  if (id) {
    // id.value = id
    getCustomActivityDetail(id)
  }
})

const detailData = ref({
  name: '',
  type_dictText: '',
  note: '',
  playerNumber: '',
  contactor: '',
  contactPhone: '',
  startTime: '',
  duration: '',
  programList: [],
})
const getCustomActivityDetail = async (id) => {
  const { code, result } = await CustomApi.getCustomActivityDetail({ id })
  if (code === 200) {
    detailData.value = result
  }
}
const infoDescList = computed(() => {
  const { startTime, duration, playerNumber, contactor, contactPhone } =
    detailData.value
  return [
    { label: '开始时间', value: startTime },
    { label: '活动类型', value: detailData.value.category_dictText },
    { label: '活动时长(分钟)', value: duration },
    { label: '参与人数', value: playerNumber },
    { label: '联系人', value: nameMask(contactor) },
    { label: '联系电话', value: phoneMask(contactPhone), showCallBtn: true },
  ]
})

const swiperList = computed(() => {
  return detailData.value.coverUrl ? detailData.value.coverUrl.split(',') : []
})
</script>

<template>
  <view class="common-page-bg">
    <view class="p-24rpx pb-60rpx">
      <template v-if="detailData.coverUrl">
        <view
          v-if="swiperList.length > 1"
          class="mb-24rpx"
        >
          <wd-swiper
            :list="swiperList"
            autoplay
            stop-autoplay-when-video-play
            :autoplay-video="false"
            :indicator="{ type: 'dots-bar' }"
          ></wd-swiper>
        </view>
        <view
          v-else
          class="mb-24rpx"
        >
          <wd-img
            custom-class="w-full h-400rpx"
            round
            radius="16rpx"
            :src="detailData.coverUrl"
            :preview-src="detailData.coverUrl"
            enable-preview
            mode="aspectFill"
          />
        </view>
      </template>
      <ActivityBaseInfo
        :name="detailData.name"
        :descList="infoDescList"
        :phone="detailData.contactPhone"
      />
      <view class="h-24rpx"></view>
      <ContentBox
        title="活动介绍"
        :content="detailData.remark"
      />
      <view class="h-24rpx"></view>
      <ContentBox title="节目列表">
        <ProgrammeList :list="detailData.programList" />
      </ContentBox>
    </view>
  </view>
</template>

<style lang="scss" scoped>
//
</style>
